<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
{% load my_filters_and_tags %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    视频
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css"
          type="text/css">
    <style>
        .map {
            height: 1000px;
            width: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>


    <div class="container">
        <!-- 搜索栏 -->
        <div class="row">
            <div id="map" class="map"></div>
            <script type="text/javascript">
                var map = new ol.Map({
                    target: 'map',
                    view: new ol.View({
                        center: ol.proj.fromLonLat([113.4491, 22.9156]),
                        zoom: 13
                    })
                });

                var wkid = 4326;
                var token = "44757c5cb4d96f74d897dc4ba430ffa3";
                //创建天地图影像底图
                var layerTianDiImg = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: getLayerUrlByData('image', wkid, token),
                        projection: 'EPSG:' + wkid,
                        wrapX: true,
                        crossOrigin: 'anonymous'
                    })
                });
                var layerTianDiImgLabel = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: getLayerUrlByData('label', wkid, token),
                        projection: 'EPSG:' + wkid,
                        wrapX: true,
                        crossOrigin: 'anonymous'
                    })
                });

                //创建天地图矢量底图
                var layerTianDi = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: getLayerUrlByData('street', wkid, token),
                        projection: 'EPSG:' + wkid,
                        wrapX: true,
                        crossOrigin: 'anonymous'
                    })
                });
                var layerTianDiLabel = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: getLayerUrlByData('street_label', wkid, token),
                        projection: 'EPSG:' + wkid,
                        wrapX: true,
                        crossOrigin: 'anonymous'
                    })
                });

                // map.addLayer(layerTianDi);
                // map.addLayer(layerTianDiLabel);

                map.addLayer(layerTianDiImg);
                // map.addLayer(layerTianDiImgLabel);

                /*
                 * 获取在线天地图
                 * type:获取的瓦片类型，影像、矢量
                 * wkid:坐标系
                 * token:官网申请的开发者token
                 */
                function getLayerUrlByData(type, wkid, token) {
                    var url = '', layerId, tileMatrixSetId;
                    if (type === 'image') {
                        url = 'http://t{1-7}.tianditu.com/DataServer?';
                        layerId = "img_";
                        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
                    } else if (type === 'label') {
                        url = 'http://t{1-7}.tianditu.com/DataServer?';
                        layerId = "cia_";
                        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
                    } else if (type === 'street') {
                        url = 'http://t{1-7}.tianditu.com/DataServer?';
                        layerId = "vec_";
                        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
                    } else if (type === 'street_label') {
                        url = 'http://t{1-7}.tianditu.com/DataServer?';
                        layerId = "cva_";
                        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
                    }
                    return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;
                }
            </script>
        </div>

    </div>


{% endblock content %}